<template>
  <div>
    <div id="login-header">
    <span class="huitui" @click="back()"><span class="iconfont zuojiantou"></span></span>
      
      <h3>账号登录</h3>
    </div>

    <div id="login-center">
      <img src="../../assets/img/yzk-img/youkulogo_03.gif" />
    </div>

    <div id="login-shuru">
      <input type="text" placeholder="请输入用户名" v-model="username" />
      <input type="password" placeholder="请输入密码" v-model="userpass" />
      <input type="button" value="登录" @click="loginCheck" />
    </div>

    <div id="login-footer">
      <a href="" class="a1"><router-link to="/Register">没有账号?点这里立即注册</router-link></a><br />
      <span>登录遇到问题?<a href="" class="a2">点这里联系客服</a></span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  name: "Login",
  data: function () {
    return {
      username: "",
      userpass: "",
    };
  },
  methods: {
// kalrry修改于11-1-14:42
    back(){
      this.$router.back(); 
    },
    loginCheck() {
      axios({
        url: "/my/login",
        method: "post",
        data: `username=${this.username}&userpass=${this.userpass}`,
      }).then((res) => {
        if (res.data) {
          // 登录成功！
          localStorage.setItem("username", this.username);
          Toast.success("登录成功！");
          // 跳回来的页面
          this.$router.push("/My");
        }else if(res.data=="pass"){
          Toast.success("密码错误！")
        }else{
          Toast.success("用户不存在！")
        }
      });
    },


  },
};
</script>

<style scoped>

@import url(../../assets/iconfont/iconfont.css);


#login-header {
  width: 100%;
  height: 0.76rem;
  display: flex;
  line-height: 0.76rem;
  padding-left: 0.2rem;
  box-sizing: border-box;
}
#login-header h3 {
  margin-left: 1.34rem;
}

#login-center {
  width: 100%;
  height: 1.45rem;
  text-align: center;
}
#login-center img {
  width: 2.3rem;
  height: 0.48rem;
  margin-top: 0.46rem;
}

#login-shuru {
  width: 100%;
  height: 2.2rem;
  text-align: center;
}

#login-shuru input {
  width: 3.56rem;
  height: 0.54rem;
}
#login-shuru input:nth-child(1) {
  margin-top: 0.2rem;
  border: none;
  border-bottom: #e1e1e1 solid 0.02rem;
  font-size: 0.16rem;
}
#login-shuru input:nth-child(2) {
  border: none;
  border-bottom: #e1e1e1 solid 0.02rem;
  font-size: 0.16rem;
}
#login-shuru input:nth-child(3) {
  margin-top: 0.3rem;
  border-radius: 0.3rem;
  background-color: #ee86c1;
  border: none;
  color: #f9c7ec;
}

#login-footer {
  width: 100%;
  height: 1.22rem;
  margin-top: 1.73rem;
  text-align: center;
}
#login-footer .a1 {
  display: block;
  color: #de2b7d;
  margin-top: 0.2rem;
  font-size: 0.15rem;
}
#login-footer span {
  color: #a6a6a6;
  font-size: 0.15rem;
}
#login-footer span .a2 {
  color: #727272;
  font-size: 0.15rem;
}
</style>